<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>xiaxuchen的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="xiaxuchen的博客">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="xiaxuchen的博客">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="xiaxuchen">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="./atom.xml" title="xiaxuchen的博客" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="./css/style.css">

<meta name="generator" content="Hexo 5.0.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="./" id="logo">xiaxuchen的博客</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="./">Home</a>
        
          <a class="main-nav-link" href="./archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="./atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-数据结构/数据结构之链表" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E9%93%BE%E8%A1%A8/" class="article-date">
  <time datetime="2020-08-07T15:08:03.992Z" itemprop="datePublished">2020-08-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="数据结构之链表"><a href="#数据结构之链表" class="headerlink" title="数据结构之链表"></a>数据结构之链表</h2><h3 id="1-简介"><a href="#1-简介" class="headerlink" title="1. 简介"></a>1. 简介</h3><p>相对于数组来说，是动态数据结构，但失去了随机访问的特性</p>
<p>元素是一个一个的节点，节点中存储着数值和下一个节点的引用，以此可以访问到下面的节点</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E9%93%BE%E8%A1%A8/" data-id="ckdkdagvx000wvout9hqr61ae" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-数据结构/数据结构之栈与队列" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E6%A0%88%E4%B8%8E%E9%98%9F%E5%88%97/" class="article-date">
  <time datetime="2020-08-07T15:08:03.989Z" itemprop="datePublished">2020-08-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="数据结构之栈与队列"><a href="#数据结构之栈与队列" class="headerlink" title="数据结构之栈与队列"></a>数据结构之栈与队列</h2><h3 id="1-栈的应用"><a href="#1-栈的应用" class="headerlink" title="1.栈的应用"></a>1.栈的应用</h3><ul>
<li><p>编辑器的undo</p>
<p>每次操作都将保存在编辑器的栈中，当要撤销的时候获取栈顶操作，进行撤销</p>
</li>
<li><p>函数调用栈</p>
</li>
</ul>
<p><img src="C:\Users\xxc、\AppData\Roaming\Typora\typora-user-images\image-20200214155844776.png" alt="image-20200214155844776"></p>
<h3 id="2-队列"><a href="#2-队列" class="headerlink" title="2.队列"></a>2.队列</h3><ul>
<li><p>循环队列</p>
<p>通过属性标识队列的队首、队尾的位置，当入队或出队只需改变属性的标识即可，而无需移动数组的元素，当首或尾到达最后将回到数组头部</p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E6%A0%88%E4%B8%8E%E9%98%9F%E5%88%97/" data-id="ckdkdagvw000vvout414j9dxi" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-数据结构/数据结构之数组" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E6%95%B0%E7%BB%84/" class="article-date">
  <time datetime="2020-08-07T15:08:03.984Z" itemprop="datePublished">2020-08-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="数据结构之数组"><a href="#数据结构之数组" class="headerlink" title="数据结构之数组"></a>数据结构之数组</h2><h3 id="1-领悟"><a href="#1-领悟" class="headerlink" title="1. 领悟"></a>1. 领悟</h3><ul>
<li><p>数组快的原因是通过第一个元素的地址进行计算，算出目标元素的位置直接去取，而无需遍历(<strong>优化可以将遍历转换成一个计算过程</strong>)</p>
</li>
<li><p>数组的声明方式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 其中[]可以在类型后面也可以在变量后面</span><br><span class="line">int[] arr &#x3D; new int[10];</span><br><span class="line">int scores[] &#x3D; new int[]&#123;100,10,99,100&#125;;</span><br><span class="line">int nums[] &#x3D; &#123;100,200,300&#125;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>创建泛型数组的语法</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">T[] arr = (T[]) <span class="keyword">new</span> Object[size];</span><br></pre></td></tr></table></figure>
</li>
<li><p>时间复杂度的计算</p>
<p>当算法的时间复杂度和输入相关时（即对于不同的输入有不同的时间复杂度），可以使用平均时间复杂度计算</p>
<p>当算法中有些操作不会每次都出现，可以将这个操作的时间复杂度分摊在n此操作中（n次操作能够触发一次此操作），以此计算出时间复杂度</p>
</li>
<li><p>算法懒一些可能性能更好一些</p>
<p>如ArrayList的resize，如果数组容量不够，将扩容为两倍，如果数组容量到了原来的一半，就缩容，这样容易产生震荡，可以让数组的容量更小的时候再去缩容</p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E6%95%B0%E7%BB%84/" data-id="ckdkdagvv000uvoutc0nv4p3p" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-数据结构/思维导图" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/" class="article-date">
  <time datetime="2020-08-07T15:08:03.921Z" itemprop="datePublished">2020-08-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="思维导图"><a href="#思维导图" class="headerlink" title="思维导图"></a>思维导图</h2><h3 id="1-应用"><a href="#1-应用" class="headerlink" title="1.应用"></a>1.应用</h3><ul>
<li>会议记录</li>
</ul>
<p><img src="C:\Users\xxc、\AppData\Roaming\Typora\typora-user-images\image-20200214233752934.png" alt="image-20200214233752934"></p>
<ul>
<li><p>计划</p>
<p><img src="C:\Users\xxc、\AppData\Roaming\Typora\typora-user-images\image-20200214233819268.png" alt="image-20200214233819268"></p>
</li>
<li><p>自我分析</p>
<p><img src="C:\Users\xxc、\AppData\Roaming\Typora\typora-user-images\image-20200214233858117.png" alt="image-20200214233858117"></p>
</li>
<li><p>整理知识体系</p>
</li>
</ul>
<p><img src="C:\Users\xxc、\AppData\Roaming\Typora\typora-user-images\image-20200214233918215.png" alt="image-20200214233918215"></p>
<ul>
<li>头脑风暴</li>
</ul>
<p><img src="C:\Users\xxc、\AppData\Roaming\Typora\typora-user-images\image-20200214234017429.png" alt="image-20200214234017429"></p>
<h3 id="2-注意点"><a href="#2-注意点" class="headerlink" title="2.注意点"></a>2.注意点</h3><p>思维导图是一种方法、工具</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/" data-id="ckdkdagvu000tvoutguv2bwwc" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-数据结构/SpringBoot学习笔记" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/SpringBoot%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" class="article-date">
  <time datetime="2020-08-07T15:08:03.917Z" itemprop="datePublished">2020-08-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="SpringBoot学习笔记"><a href="#SpringBoot学习笔记" class="headerlink" title="SpringBoot学习笔记"></a>SpringBoot学习笔记</h2><h3 id="一、异步任务"><a href="#一、异步任务" class="headerlink" title="一、异步任务"></a>一、异步任务</h3><p>在SpringbootApplication上添加**@EnableAsync<strong>注解，就启用了异步任务，springboot内部维护了线程池，用户只需要给指定方法添加</strong>@Async**注解，调用该方法即为异步调用</p>
<h3 id="二、问题"><a href="#二、问题" class="headerlink" title="二、问题"></a>二、问题</h3><p>无法使用线程池执行Insert into on duplicte key语句</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/SpringBoot%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" data-id="ckdkdagvs000svout5u2eh4bl" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-前端/微信公众号项目前端血泪史" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="./2020/08/07/%E5%89%8D%E7%AB%AF/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E9%A1%B9%E7%9B%AE%E5%89%8D%E7%AB%AF%E8%A1%80%E6%B3%AA%E5%8F%B2/" class="article-date">
  <time datetime="2020-08-07T15:08:02.806Z" itemprop="datePublished">2020-08-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="微信公众号项目前端血泪史"><a href="#微信公众号项目前端血泪史" class="headerlink" title="微信公众号项目前端血泪史"></a>微信公众号项目前端血泪史</h2><ol>
<li><p>修改数组数据视图不更新</p>
<p>数组中的数据如果是对象，修改他的属性是无效的，数组的更新是基于其元素的添加删除修改的，所以需要使用splice函数来修改</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 先修改用户信息</span></span><br><span class="line"><span class="keyword">let</span> user = <span class="built_in">this</span>.userData.users[index]</span><br><span class="line">   user.selected = !row.selected</span><br><span class="line">   <span class="comment">// 将此用户从列表删除后再插入到原位置    </span></span><br><span class="line">   <span class="built_in">this</span>.userData.users.splice(index, <span class="number">1</span>, user)</span><br></pre></td></tr></table></figure>



</li>
</ol>
<ol start="2">
<li><p>计算属性值更新了el-table的视图也不更新</p>
<p>使用自定义slot时没有指定slot-scope属性，所以视图不更新</p>
</li>
<li><p>在namespaced模式下无法获取到vuex的getters</p>
<p>尝试使用类似于state的引用方式this.$store.getters.模块.属性</p>
<p>无法获取，undefined甚至报错</p>
</li>
<li><p>vuex中的对象的属性改变并不会让computed属性修改从而的导致视图更新</p>
<p>方法一(傻逼方法)，用一个数字属性，每次修改对象时同时++然后在页面监听数字属性的变化就可以了</p>
<p>方法二:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如果要添加新属性则放在newObj中，如果要删除属性，先删除obj的属性，然后assign即可，无需newObj </span></span><br><span class="line">obj = <span class="built_in">Object</span>.assign(&#123;&#125;,obj, newObj)</span><br></pre></td></tr></table></figure>


</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/08/07/%E5%89%8D%E7%AB%AF/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E9%A1%B9%E7%9B%AE%E5%89%8D%E7%AB%AF%E8%A1%80%E6%B3%AA%E5%8F%B2/" data-id="ckdkdagup000fvout3c97d3c8" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-前端/学习UniApp遇到的坑" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="./2020/08/07/%E5%89%8D%E7%AB%AF/%E5%AD%A6%E4%B9%A0UniApp%E9%81%87%E5%88%B0%E7%9A%84%E5%9D%91/" class="article-date">
  <time datetime="2020-08-07T15:08:02.803Z" itemprop="datePublished">2020-08-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="uniapp学习笔记"><a href="#uniapp学习笔记" class="headerlink" title="uniapp学习笔记"></a>uniapp学习笔记</h2><ol>
<li><p>app端老是没有代码同步</p>
<p>重启Hbuilder底座即可(不得不吐槽，垃圾)</p>
</li>
<li><p>使用tabbar时导航栏相互重叠</p>
<img src="C:\Users\xxc、\AppData\Roaming\Typora\typora-user-images\image-20200114220114310.png" alt="image-20200114220114310" style="zoom:25%;" />

<p>原因:配置了导航栏的背景色透明，然后他就能看到所有的导航栏了。。。</p>
<p>解决办法:设置为不透明的颜色。。。</p>
</li>
<li><p>遇到玄学问题搞了两个小时</p>
<p>问题描述:字体文件加载不出来</p>
<p>过程:不断的重启设备重启IDE修改代码，仍然无济于事</p>
<p>解决的步骤:删除掉一行无关紧要的引入common.css的代码，可以运行了，猜测是缓存没有清理或者Hbuilder不能全局保存，在引入样式的地方从始至终没有保存，导致字体图标都没有引入</p>
</li>
<li><p>获取video的上下文无法操控video元素</p>
<p>uni.createVideoContext(id)</p>
<p>原因:id不应该加#</p>
</li>
<li><p>在发出事件时使用<strong>中划线</strong>进行间隔，因为html不区分大小写，有时可能会没有效果</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;若发出的事件为onTabToggle，应写为如下形式</span><br><span class="line">&#x2F;&#x2F; 发出切换事件</span><br><span class="line">this.$emit(&#39;on-tab-toggle&#39;, index)</span><br></pre></td></tr></table></figure>



</li>
</ol>
<ol start="6">
<li><p>要使一些元素在同一行排列即使位置不够也不换行的方法:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.scroll-h &#123;</span><br><span class="line">        &#x2F;&#x2F; 设置换行方式，不换行</span><br><span class="line">        white-space: nowrap;</span><br><span class="line">        .tab-item &#123;</span><br><span class="line">        &#x2F;&#x2F;将元素设置为行内块</span><br><span class="line">        display: inline-block;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ol>
<ol start="7">
<li><p>尽量使用es6的箭头函数，去除this作用域</p>
</li>
<li><p>下拉加载更多，使用Scroller-view的下拉事件即可，然后在底部加一个text显示当前的加载信息(如<strong>加载中…</strong>)</p>
</li>
<li><p>在android中，flex布局居中的absolute元素不在web预览同样的位置，通过css调整（其中calc可以计算upx）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&amp;&gt;.btn-play &#123;</span><br><span class="line">                position: absolute;</span><br><span class="line">                left: calc(50% - 50upx);</span><br><span class="line">                top: calc(50% - 50upx);</span><br><span class="line">                color: white;</span><br><span class="line">                font-size: 100upx;</span><br><span class="line">            &#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>css居中</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">.nothing &#123;</span><br><span class="line">        display: flex;</span><br><span class="line">        align-items: center;</span><br><span class="line">        justify-content: center;</span><br><span class="line">        position: absolute;</span><br><span class="line">        top: 0;</span><br><span class="line">        bottom: 0;</span><br><span class="line">        left: 0;</span><br><span class="line">        right: 0;</span><br><span class="line">        background: #FFFFFF;</span><br><span class="line">        .img &#123;</span><br><span class="line">            width: 40%;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>android端不识别rgba格式颜色</p>
</li>
<li><p>autoBackButton无效</p>
</li>
<li><p>去除默认导航栏</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; pages.json 页面的style</span><br><span class="line">&quot;app-plus&quot;:&#123;</span><br><span class="line">                    &quot;titleNView&quot;:false</span><br><span class="line">                &#125;</span><br></pre></td></tr></table></figure>

</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/08/07/%E5%89%8D%E7%AB%AF/%E5%AD%A6%E4%B9%A0UniApp%E9%81%87%E5%88%B0%E7%9A%84%E5%9D%91/" data-id="ckdkdagun000evout0wf6ci9r" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-前端/WebPack配置" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="./2020/08/07/%E5%89%8D%E7%AB%AF/WebPack%E9%85%8D%E7%BD%AE/" class="article-date">
  <time datetime="2020-08-07T15:08:02.784Z" itemprop="datePublished">2020-08-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="WebPack配置"><a href="#WebPack配置" class="headerlink" title="WebPack配置"></a>WebPack配置</h2><h3 id="零、预备知识"><a href="#零、预备知识" class="headerlink" title="零、预备知识"></a>零、预备知识</h3><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i 框架名称 -S //当前项目的依赖</span><br><span class="line">npm i 框架名称 -D //当前项目开发环境的依赖，不会打包到产物上</span><br></pre></td></tr></table></figure>



<h3 id="一、配置文件分层"><a href="#一、配置文件分层" class="headerlink" title="一、配置文件分层"></a>一、配置文件分层</h3><p>​    为了合理规范配置，让配置看起来更整洁也便于修改，故将webpack的配置放置在build目录下并改为base、client两个文件，base文件编写公共的配置，而client则根据当前的环境(开发或生产)来进行不同的配置</p>
<p>目录结构如下:</p>
<p><img src="C:\Users\xxc、\AppData\Roaming\Typora\typora-user-images\image-20200202154631021.png" alt="image-20200202154631021"></p>
<p>​    由于配置文件的位置以及名称改变，故需要修改npm命令选择，指定正确的配置位置，如下:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">       &quot;build&quot;: &quot;cross-env NODE_ENV=production webpack --config build/webpack.config.client.js&quot;,</span><br><span class="line">       &quot;dev&quot;: &quot;cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js&quot;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>

<p>然后由于需要将两个配置文件合并，以前的写法不够优雅，所以使用webpack-merge来进行合并工作，如下:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mergeConfig = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> baseConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.base&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> config = mergeConfig(baseConfig,&#123;</span><br><span class="line">        devtool: <span class="string">&#x27;#cheap-module-eval-source-map&#x27;</span>,</span><br><span class="line">        <span class="comment">// 开发模式下直接用</span></span><br><span class="line">        <span class="built_in">module</span>: &#123;</span><br><span class="line">            rules: [...]</span><br><span class="line">        &#125;,</span><br><span class="line">        devServer,</span><br><span class="line">        plugins: defaultPlugins.concat(</span><br><span class="line">            [...]</span><br><span class="line">        )</span><br><span class="line">    &#125;)</span><br></pre></td></tr></table></figure>



<h3 id="二、vue-loader详解"><a href="#二、vue-loader详解" class="headerlink" title="二、vue-loader详解"></a>二、vue-loader详解</h3><p>​    将vue-loader的配置单独分离出来，放置在build/vue-loader.config.js中，便于管理,如下:</p>
<p>vue-loader.config.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = <span class="function">(<span class="params">isDev</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="comment">// 忽略html中尾部的空格</span></span><br><span class="line">        preserveWhiteSpace: <span class="literal">true</span>,</span><br><span class="line">        <span class="comment">// 将vue template中的css拆分出来</span></span><br><span class="line">        extractCSS: !isDev,</span><br><span class="line">        <span class="comment">// 使用cssModule方式时的配置</span></span><br><span class="line">        cssModules: &#123;</span><br><span class="line">            <span class="comment">// vue文件中的class的名字的生成方式，将类名变为唯一</span></span><br><span class="line">            localIdentName: <span class="string">&#x27;[path]-[name]-[hash:base64:5]&#x27;</span>,</span><br><span class="line">            <span class="comment">// 将class转换为js变量名将-转换为驼峰</span></span><br><span class="line">            camelCase: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 热更新配置，还是根据环境变量生成</span></span><br><span class="line">        <span class="comment">// hotReload: false</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">// 自定义vue文件代码块，如template、style、script</span></span><br><span class="line">        <span class="comment">// loaders</span></span><br><span class="line">        <span class="comment">// preLoader、postLoader 在loader加载之前加载之后进行加载</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>cssModule的概念</p>
<p>我们可以给vue文件的style标签加上module属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;style lang&#x3D;&quot;stylus&quot; scoped module&gt;</span><br><span class="line">    .add-input</span><br><span class="line">        position relative</span><br><span class="line">        margin 0</span><br><span class="line">        border 0 solid transparent</span><br><span class="line">        width 100%</span><br><span class="line">        font-family inherit</span><br><span class="line">        font-size 20px</span><br><span class="line">        font-weight 500</span><br><span class="line">        line-height 1.4em</span><br><span class="line">        outline none</span><br><span class="line">        color inherit</span><br><span class="line">        border none</span><br><span class="line">        box-shadow inset 0 -1px 5px 0 rgba(0,0,0,0.1)</span><br><span class="line">        box-sizing border-box</span><br><span class="line">        font-smoothing antialiased</span><br><span class="line">        padding 16px 16px 16px 60px</span><br><span class="line">        border none</span><br><span class="line">        box-shadow inset 0 -2px 1px rgba(0,0,0,0.1)</span><br><span class="line">&lt;&#x2F;style&gt;</span><br></pre></td></tr></table></figure>

<p>这样的话在js中就会有$style变量用于引用style中的class，如$style.addInput</p>
<p>我们可以通过vue-loader的cssModules来配置cssModule中的类名的生成规则，具体看上面配置的代码</p>
</li>
</ul>
<h3 id="三、-eslint"><a href="#三、-eslint" class="headerlink" title="三、 eslint"></a>三、 eslint</h3><ol>
<li><p>安装</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm i eslint eslint-config-standard eslint-plugin-standard  eslint-plugin-promise eslint-plugin-import eslint-plugin-html -D</span><br><span class="line">&#x2F;&#x2F; eslint 依赖</span><br><span class="line"> npm i eslint-loader babel-eslint -D &#x2F;&#x2F; eslint自动检测依赖</span><br></pre></td></tr></table></figure>
</li>
<li><p>配置</p>
<p>.eslintrc</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &#x2F;&#x2F; 使用标准模式</span><br><span class="line">    &quot;extends&quot;: &quot;standard&quot;,</span><br><span class="line">    &#x2F;&#x2F; 使用html插件，可以检查.vue文件</span><br><span class="line">    &quot;plugins&quot;: [</span><br><span class="line">        &quot;html&quot;</span><br><span class="line">    ],</span><br><span class="line">    &#x2F;&#x2F; 因为webpack管理的代码都经过babel处理,故使用babel-eslint</span><br><span class="line">    &quot;parser&quot;: &quot;babel-eslint&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>webpack.config.base.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//...</span></span><br><span class="line"><span class="comment">// 配置自动检测// eslint-loader</span></span><br><span class="line">            &#123; </span><br><span class="line">                test: <span class="regexp">/\.(vue|js|jsx)$/</span>,</span><br><span class="line">                loader: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">                exclude: <span class="regexp">/node_modules/</span>,</span><br><span class="line">                <span class="comment">// 在真正的loader处理前处理</span></span><br><span class="line">                enforce: <span class="string">&quot;pre&quot;</span></span><br><span class="line">            &#125;</span><br><span class="line"><span class="comment">//...</span></span><br></pre></td></tr></table></figure>



</li>
</ol>
<h3 id="四、webpack4升级"><a href="#四、webpack4升级" class="headerlink" title="四、webpack4升级"></a>四、webpack4升级</h3><ol>
<li><p>安装</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i webpack webpack-cli webpack-dev-server webpack-merge</span><br></pre></td></tr></table></figure>
</li>
<li><p>配置</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 分离代码</span></span><br><span class="line"> optimization: &#123;</span><br><span class="line">         splitChunks: &#123;</span><br><span class="line">             <span class="comment">// 默认把node_modules中的代码打包到一个js</span></span><br><span class="line">             name: <span class="string">&quot;all&quot;</span></span><br><span class="line">         &#125;,</span><br><span class="line">         <span class="comment">// webpack相关代码打包</span></span><br><span class="line">         runtimeChunk: <span class="literal">true</span></span><br><span class="line">     &#125;</span><br><span class="line">   </span><br><span class="line"><span class="comment">//已废弃 new webpack.NoEmitOnErrorsPlugin()</span></span><br></pre></td></tr></table></figure>



</li>
</ol>
<h3 id="最后-一份完整的webpack配置"><a href="#最后-一份完整的webpack配置" class="headerlink" title="最后:一份完整的webpack配置"></a>最后:一份完整的webpack配置</h3><h4 id="webpack-config-js"><a href="#webpack-config-js" class="headerlink" title="webpack.config.js"></a>webpack.config.js</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>) <span class="comment">// nodejs基础包，用于处理路径，如拼接</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> isDev = process.env.NODE_ENV === <span class="string">&#x27;development&#x27;</span> <span class="comment">// 获取环境变量</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> config = &#123;</span><br><span class="line">    target: <span class="string">&#x27;web&#x27;</span>,</span><br><span class="line">    entry: path.join(__dirname, <span class="string">&#x27;../src/main.js&#x27;</span>), <span class="comment">// 入口js，通过入口的内容以及他的依赖进行打包</span></span><br><span class="line">    output: &#123; <span class="comment">// 输出:入口打包的内容输出到哪里</span></span><br><span class="line">        filename: <span class="string">&#x27;bundle.[hash:8].js&#x27;</span>,</span><br><span class="line">        path: path.join(__dirname, <span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [&#123; <span class="comment">// 配置loader处理的文件类型，因为原本只支持.js类型，通过loader机制进行扩展，以支持更多类型</span></span><br><span class="line">                test: <span class="regexp">/\.vue$/</span>,</span><br><span class="line">                use: [</span><br><span class="line">                    <span class="string">&#x27;vue-loader&#x27;</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;, &#123; <span class="comment">// 配置loader处理的文件类型，因为原本只支持.js类型，通过loader机制进行扩展，以支持更多类型</span></span><br><span class="line">                test: <span class="regexp">/\.jsx$/</span>,</span><br><span class="line">                loader: <span class="string">&#x27;babel-loader&#x27;</span></span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                test: <span class="regexp">/\.(jpeg|png|jpg|svg|gif)$/</span>,</span><br><span class="line">                use: [&#123;</span><br><span class="line">                    loader: <span class="string">&#x27;url-loader&#x27;</span>, <span class="comment">// 将图片转换为base64直接放在js中，无需额外加载</span></span><br><span class="line">                    options: &#123; <span class="comment">//配置小于1024kb即可转换base64</span></span><br><span class="line">                        limit: <span class="number">1024</span>,</span><br><span class="line">                        name: <span class="string">&#x27;[name].[ext]&#x27;</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;]</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = config</span><br></pre></td></tr></table></figure>

<h4 id="webpack-client-js"><a href="#webpack-client-js" class="headerlink" title="webpack.client.js"></a>webpack.client.js</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// nodejs基础包，用于处理路径，如拼接</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line">    <span class="comment">// 必须的插件，用于加载.vue文件格式</span></span><br><span class="line"><span class="keyword">const</span> VueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> ExtractPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> mergeConfig = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取环境变量</span></span><br><span class="line"><span class="keyword">const</span> isDev = process.env.NODE_ENV === <span class="string">&#x27;development&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> baseConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.base&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 默认的插件，由于后期会改变，故不放置在base里面</span></span><br><span class="line"><span class="keyword">const</span> defaultPlugins = [ <span class="comment">// 插件</span></span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(),</span><br><span class="line">    <span class="keyword">new</span> VueLoaderPlugin(),</span><br><span class="line">    <span class="comment">// 将环境变量暴露到项目中，使得内容可以分模式编译</span></span><br><span class="line">    <span class="keyword">new</span> webpack.DefinePlugin(&#123;</span><br><span class="line">        <span class="string">&#x27;process.env&#x27;</span>: &#123;</span><br><span class="line">            NODE_ENV: isDev ? <span class="string">&#x27;&quot;development&quot;&#x27;</span> : <span class="string">&#x27;&quot;production&quot;&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> devServer = &#123;</span><br><span class="line">    port: <span class="number">8001</span>,</span><br><span class="line">    host: <span class="string">&#x27;0.0.0.0&#x27;</span>, <span class="comment">// 本机ip和127.0.0.1都可以访问</span></span><br><span class="line">    overlay: &#123;</span><br><span class="line">        errors: <span class="literal">true</span> <span class="comment">// 遇到错误都打印出来</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 开启热更新</span></span><br><span class="line">    hot: <span class="literal">true</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> config = <span class="literal">null</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果是开发环境则添加服务器配置</span></span><br><span class="line"><span class="keyword">if</span> (isDev) &#123;</span><br><span class="line">    config = mergeConfig(baseConfig, &#123;</span><br><span class="line">        <span class="comment">// 不直接使用编译后的代码，而是展示源码映射，方便调试</span></span><br><span class="line">        devtool: <span class="string">&#x27;#cheap-module-eval-source-map&#x27;</span>,</span><br><span class="line">        <span class="comment">// 开发模式下直接用</span></span><br><span class="line">        <span class="built_in">module</span>: &#123;</span><br><span class="line">            rules: [&#123;</span><br><span class="line">                test: <span class="regexp">/\.styl/</span>,</span><br><span class="line">                use: [</span><br><span class="line">                    <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">                    <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">                    <span class="comment">// 为stylus加上postcss处理器，同时当其他loader生成sourceMap后复用而不重新创建</span></span><br><span class="line">                    &#123;</span><br><span class="line">                        loader: <span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                        options: &#123;</span><br><span class="line">                            sourceMap: <span class="literal">true</span></span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;,</span><br><span class="line">                    <span class="string">&#x27;stylus-loader&#x27;</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;]</span><br><span class="line">        &#125;,</span><br><span class="line">        devServer,</span><br><span class="line">        plugins: defaultPlugins.concat(</span><br><span class="line">            [</span><br><span class="line">                <span class="comment">// 热更新</span></span><br><span class="line">                <span class="keyword">new</span> webpack.HotModuleReplacementPlugin(),</span><br><span class="line">                <span class="keyword">new</span> webpack.NoEmitOnErrorsPlugin()</span><br><span class="line">            ]</span><br><span class="line">        )</span><br><span class="line">    &#125;)</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    config = mergeConfig(baseConfig, &#123;</span><br><span class="line">        <span class="comment">// 生产模式下，将框架的js代码单独出来，方便浏览器缓存</span></span><br><span class="line">        entry: &#123;</span><br><span class="line">            app: path.join(__dirname, <span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">            vendor: [<span class="string">&#x27;vue&#x27;</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">// 生产模式使用chunkHash</span></span><br><span class="line">        output: &#123;</span><br><span class="line">            filename: <span class="string">&#x27;[name].[chunkHash:8].js&#x27;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="built_in">module</span>: &#123;</span><br><span class="line">            rules: [&#123;</span><br><span class="line">                test: <span class="regexp">/\.styl/</span>,</span><br><span class="line">                use: [</span><br><span class="line">                    <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">                    <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">                    <span class="comment">// 为stylus加上postcss处理器，同时当其他loader生成sourceMap后复用而不重新创建</span></span><br><span class="line">                    &#123;</span><br><span class="line">                        loader: <span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                        options: &#123;</span><br><span class="line">                            sourceMap: <span class="literal">true</span></span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;,</span><br><span class="line">                    <span class="string">&#x27;stylus-loader&#x27;</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;]</span><br><span class="line">        &#125;,</span><br><span class="line">        optimization: &#123;</span><br><span class="line">            splitChunks: &#123;</span><br><span class="line">                cacheGroups: &#123;</span><br><span class="line">                    commons: &#123;</span><br><span class="line">                        name: <span class="string">&quot;vendor&quot;</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        plugins: defaultPlugins</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = config</span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/08/07/%E5%89%8D%E7%AB%AF/WebPack%E9%85%8D%E7%BD%AE/" data-id="ckdkdagu10009vout4u9e2bdv" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-前端/vue自定义组件src无效" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="./2020/08/07/%E5%89%8D%E7%AB%AF/vue%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6src%E6%97%A0%E6%95%88/" class="article-date">
  <time datetime="2020-08-07T15:08:02.773Z" itemprop="datePublished">2020-08-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="vue自定义组件src无效"><a href="#vue自定义组件src无效" class="headerlink" title="vue自定义组件src无效"></a>vue自定义组件src无效</h1><ol>
<li><p>遭遇</p>
<p>在使用element-ui的<strong>el-image</strong> 控件时，使用src属性无效，代码如下</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 无法加载 --&gt;</span><br><span class="line">&lt;el-image src&#x3D;&quot;..&#x2F;..&#x2F;assets&#x2F;images&#x2F;brand.png&quot;&gt;&lt;&#x2F;el-image&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>解决方法</p>
<p>使用数据绑定时同时调用require方法加载图片</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-image :src&#x3D;&quot;require(&#39;..&#x2F;..&#x2F;assets&#x2F;images&#x2F;brand.png&#39;)&quot;&gt;&lt;&#x2F;el-image&gt;</span><br></pre></td></tr></table></figure>



</li>
</ol>
<ol start="3">
<li><p>自定义组件加载图片</p>
<p>暴露出src属性，外部使用自定义组件时使用数据绑定同时调用require方法加载图片</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;!--自定义组件 my-img --&gt;</span><br><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;!--绑定src属性--&gt;</span><br><span class="line">    &lt;img :src&#x3D;&quot;src&quot;&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line"></span><br><span class="line">   &lt;!--使用--&gt;</span><br><span class="line">    &lt;my-img :src&#x3D;&quot;require(&#39;..&#x2F;..&#x2F;assets&#x2F;images&#x2F;brand.png&#39;)&quot;&gt;&lt;&#x2F;my-img&gt;</span><br></pre></td></tr></table></figure>





</li>
</ol>
   <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">   </span><br><span class="line"></span><br><span class="line">   </span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/08/07/%E5%89%8D%E7%AB%AF/vue%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6src%E6%97%A0%E6%95%88/" data-id="ckdkdaguj000dvout94v52qpn" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-前端/Vue基础知识" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="./2020/08/07/%E5%89%8D%E7%AB%AF/Vue%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" class="article-date">
  <time datetime="2020-08-07T15:08:02.769Z" itemprop="datePublished">2020-08-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="Vue基础知识"><a href="#Vue基础知识" class="headerlink" title="Vue基础知识"></a>Vue基础知识</h2><h3 id="一-Vue实例"><a href="#一-Vue实例" class="headerlink" title="一. Vue实例"></a>一. Vue实例</h3><h4 id="1-创建实例"><a href="#1-创建实例" class="headerlink" title="1. 创建实例"></a>1. 创建实例</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 通过这种方式可以将template中的内容挂在到id为root的节点上,传入的对象称为options</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="comment">// 内容的挂载点</span></span><br><span class="line">    el: <span class="string">&#x27;#root&#x27;</span>,</span><br><span class="line">    <span class="comment">// 渲染的内容</span></span><br><span class="line">    template: <span class="string">&#x27;&lt;h1&gt;hello&lt;/h1&gt;&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 不用el可以使用$mount方法,效果相同</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    template: <span class="string">&#x27;&lt;h1&gt;hello&lt;/h1&gt;&#x27;</span></span><br><span class="line">&#125;).$mount(<span class="string">&quot;#root&quot;</span>)</span><br></pre></td></tr></table></figure>

<h4 id="2-data属性"><a href="#2-data属性" class="headerlink" title="2. data属性"></a>2. data属性</h4><p>用于声明数据，使得可以在模板中使用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="comment">// 模板字符串渲染，将会显示hello</span></span><br><span class="line">    template: <span class="string">&#x27;&lt;h1&gt;&#123;&#123;text&#125;&#125;&lt;/h1&gt;&#x27;</span>,</span><br><span class="line">    data: &#123;</span><br><span class="line">        text: <span class="string">&#x27;hello&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;).$mount(<span class="string">&quot;#root&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 可以通过以下方式操作data中的属性</span></span><br><span class="line">app.text++;</span><br></pre></td></tr></table></figure>

<h4 id="3-实例属性"><a href="#3-实例属性" class="headerlink" title="3. 实例属性"></a>3. 实例属性</h4><ul>
<li><p>vue.$data</p>
<p>创建vue时的data属性</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// app.text++;效果相同，都能更新数据</span></span><br><span class="line">    app.$data.text++;</span><br><span class="line">&#125;, <span class="number">1000</span>)</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p>vue.$props</p>
<p>vue组件暴露的属性</p>
</li>
<li><p>vue.$el</p>
<p>挂载的节点</p>
</li>
<li><p>vue.$options</p>
<p>创建vue时传入的对象复制版，只可读，修改不会更新</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="comment">// 模板字符串渲染，将会显示hello</span></span><br><span class="line">    template: <span class="string">&#x27;&lt;h1&gt;&#123;&#123;text&#125;&#125;&lt;/h1&gt;&#x27;</span>,</span><br><span class="line">    data: &#123;</span><br><span class="line">        text: <span class="string">&#x27;hello&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 无效</span></span><br><span class="line">    app.$options.text++;</span><br><span class="line">&#125;, <span class="number">1000</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>vue.$root</p>
<p>就是vue的实例，app</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue.$root &#x3D;&#x3D;&#x3D; app &#x2F;&#x2F; true</span><br></pre></td></tr></table></figure>
</li>
<li><p>vue.$children</p>
<p>可以拿到内容部分的子元素</p>
</li>
<li><p>vue.$refs</p>
<p>当元素上面有ref属性，我们可以通过vue.$refs.ref值引用dom元素</p>
</li>
<li><p>vue.$isServer</p>
<p>在服务器端渲染使用</p>
</li>
<li><p>vue.$watch</p>
<p>同写在options中效果一样，去监听属性的变化</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> unwatch = vue.$watch(<span class="string">&#x27;text&#x27;</span>,<span class="function">(<span class="params">old,<span class="keyword">new</span></span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 当text变化时调用</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 当销毁时,防止内存泄漏</span></span><br><span class="line">unwatch()</span><br></pre></td></tr></table></figure>
</li>
<li><p>vue.$emit</p>
<p>发出事件,同时可以传递数据</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue.$emit(<span class="string">&#x27;事件名称&#x27;</span>,...数据)</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p>vue.$on</p>
<p>监听事件的发送，注意$on和$emit必须在同一个vue对象上</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">vue.$on(&#39;事件名称&#39;,(...数据)&#x3D;&gt;&#123;</span><br><span class="line">    &#x2F;&#x2F; 当事件发送后触发</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>vue.$once</p>
<p>作用同$on但是只触发一次</p>
</li>
<li><p>vue.$forceUpdate</p>
<p>可以强制渲染，但是乱用会有性能问题</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">const app &#x3D; new Vue(&#123;</span><br><span class="line">    template: &#39;&lt;h1&gt;&#123;&#123;text&#125;&#125; &#123;&#123;obj.a&#125;&#125;&lt;&#x2F;h1&gt;&#39;,</span><br><span class="line">    data: &#123;</span><br><span class="line">        text: 0,</span><br><span class="line">        obj: &#123;&#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;).$mount(&quot;#root&quot;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;当前obj并没有a属性，故不存在响应式，所以视图不会更新</span><br><span class="line">let i &#x3D; 0;</span><br><span class="line">setInterval(() &#x3D;&gt; &#123;</span><br><span class="line">    app.obj.a &#x3D; i;</span><br><span class="line">    &#x2F;&#x2F;app.$forceUpdate() 调用这个即可强制渲染</span><br><span class="line">    &#x2F;&#x2F;app.$set(app.obj,&#39;a&#39;,i) 这样也可以，不会有性能问题，就像直接定义</span><br><span class="line">&#125;, 1000)</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p>vue.$set</p>
<p>当data中的对象要添加属性时可以使用此方法，将其加入响应式</p>
</li>
<li><p>vue.$delete</p>
<p>当data中的对象或者属性不需要了，可以使用$delete移除，以免内存泄漏</p>
</li>
<li><p>vue.$nextTicket</p>
<p>vue的视图更新不是数据一变化就更新的，很多时候连续的数据变化可能只会更新一次，这样的话我们可以使用$nextTicket在下次更新的时候更新数据</p>
</li>
</ul>
<h3 id="二、-Vue的生命周期"><a href="#二、-Vue的生命周期" class="headerlink" title="二、 Vue的生命周期"></a>二、 Vue的生命周期</h3><p><img src="https://cn.vuejs.org/images/lifecycle.png" alt="Vue 实例生命周期"></p>
<h3 id="三、Vue数据绑定难点"><a href="#三、Vue数据绑定难点" class="headerlink" title="三、Vue数据绑定难点"></a>三、Vue数据绑定难点</h3><ul>
<li><p>computed</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">computed: &#123;</span><br><span class="line">    name: &#123;</span><br><span class="line">        get () &#123;</span><br><span class="line">            return this.firstName + this.LastName</span><br><span class="line">        &#125;</span><br><span class="line">        &#x2F;&#x2F; 可以设置值，但不建议</span><br><span class="line">        set (nameVal) &#123;</span><br><span class="line">            let names &#x3D; nameVal.split(&#39; &#39;)</span><br><span class="line">            this.firstName &#x3D; names[0]</span><br><span class="line">            this.lastName &#x3D; names[1]</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#x2F;&#x2F; 一般直接这样，只获取不设置</span><br><span class="line">    computedValue () &#123;</span><br><span class="line">        return this.value + 1</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p>watch</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">        text: &#123;</span><br><span class="line">            handler(oldVal, newVal) &#123;</span><br><span class="line">                <span class="comment">// 监听到数据变化则会触发，不适用于数据的显示，更适用于请求服务器</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="comment">// 绑定时也执行一次</span></span><br><span class="line">            immediate: <span class="literal">true</span>,</span><br><span class="line">            <span class="comment">// 对象的属性变化也能触发，但是性能开销大，如果只对一个属性监听可以直接监听那个属性</span></span><br><span class="line">            deep: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h3 id="四、组件"><a href="#四、组件" class="headerlink" title="四、组件"></a>四、组件</h3><ul>
<li><p>props</p>
<p>props最好不要在组件内部修改，props的格式，prop属性可以自定义验证格式如下:</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">props: &#123;</span><br><span class="line">       name: &#123;</span><br><span class="line">           validator(value) &#123;</span><br><span class="line">            <span class="comment">// 校验逻辑</span></span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p>Vue.extend</p>
<p>通过他可以复用options，一般可以用做完成通用的功能</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> Comp = Vue.extend(options)</span><br><span class="line"><span class="keyword">new</span> Comp(newOptions) <span class="comment">//这样就可以合并两个options的内容，起到一个复用的功能</span></span><br><span class="line"><span class="comment">// 当在实例中使用</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="keyword">extends</span>: options</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/08/07/%E5%89%8D%E7%AB%AF/Vue%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" data-id="ckdkdagty0008vout8tab2da1" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  


  <nav id="page-nav">
    
    <span class="page-number current">1</span><a class="page-number" href="./page/2/">2</a><a class="page-number" href="./page/3/">3</a><a class="page-number" href="./page/4/">4</a><a class="extend next" rel="next" href="./page/2/">Next &amp;raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="./archives/2020/08/">August 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E9%93%BE%E8%A1%A8/">(no title)</a>
          </li>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E6%A0%88%E4%B8%8E%E9%98%9F%E5%88%97/">(no title)</a>
          </li>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E6%95%B0%E7%BB%84/">(no title)</a>
          </li>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/">(no title)</a>
          </li>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/SpringBoot%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">(no title)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 xiaxuchen<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="./" class="mobile-nav-link">Home</a>
  
    <a href="./archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="./fancybox/jquery.fancybox.css">

  
<script src="./fancybox/jquery.fancybox.pack.js"></script>




<script src="./js/script.js"></script>




  </div>
</body>
</html>